<template>
  <el-carousel indicator-position="inside">
    <el-carousel-item v-for="item in images" :key="item">
      <img :src="item" alt="carousel image" style="width: 100%; height: auto;">
    </el-carousel-item>
  </el-carousel>
  <el-card shadow="never">
    <el-table ref="table" :data="paging.list" empty-text="暂无数据">
      <el-table-column prop="id" label="ID" width="90"> </el-table-column>
      <el-table-column prop="name" label="动物名称">
        <template #default="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column prop="enName" label="拉丁名称">
        <template #default="scope">
          {{ scope.row.enName }}
        </template>
      </el-table-column>
      <el-table-column prop="phylum" label="门">
        <template #default="scope">
          {{ scope.row.phylum }}
        </template>
      </el-table-column>
      <el-table-column prop="cover" label="图片">
        <template #default="scope">
          {{ scope.row.cover }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200">
        <template #default="scope">
          <a @click="toDetail(scope.row.id)">详情</a>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :current="query.page" :next="paging.next" @toPage="toPage"></Pagination>
  </el-card>
  <PlanDialog ref="planDialog" @reload="search"></PlanDialog>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive, getCurrentInstance } from 'vue'
import Pagination from '@/components/common/pagination.vue'
import { useRoute, useRouter } from 'vue-router'
import type { Paging, Search } from '@/utils/paging'
import type { biology_detail } from '@/types/biology'
import server from '@/utils/server'
const app = getCurrentInstance()
const route = useRoute()
const router = useRouter()
const examId = Number.parseInt(route.query.examId as string)
const images = ref([
  '/pic.png',
  '/pic1.png',
  '/pic2.png'
]);
const currentIndex = ref(0);
const totalItems = ref(images.value.length);

function next() {
  currentIndex.value = (currentIndex.value + 1) % totalItems.value;
}

function prev() {
  currentIndex.value = (currentIndex.value - 1 + totalItems.value) % totalItems.value;
}
interface PlanSearch extends Search {
  examId: number
}

const query = ref<PlanSearch>({
  examId: examId,
  page: 1, // 当前页p
  size: 10 // 分页大小
})

const paging = ref<Paging<biology_detail>>({
  list: [], // 数据列表
  next: 0
})

const toPage = (page: number) => {
  query.value.page = page
  search()
}
onMounted(() => {
  search()
})
// 获取客户列表
const search = async () => {
  console.log('调用前')
  paging.value = await server.get('/api/biology/search', {
    params: query.value
  })
  console.log('调用后', paging)
}

const toDetail = (id: number) => {
  router.push({
    path: '/detail',
    query: { id: id }
  })
}
const toPaper = async (item: biology_detail) => {
  try {
    const newPaperId = (await server.get('/api/biology/detail', {
      params: item.id
      }))
    console.log(newPaperId)
  } catch (e) {
    console.log(e)
  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
  .carousel {
    overflow: hidden;
    position: relative;
  }
  .carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }
  .carousel-item {
    width: 100%; /* Ensure each item takes full width */
    height:100%
  }
  button {
    position: absolute; /* Position buttons */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Center vertically */
  }
  button:first-of-type { left: 10px; } /* Left button */
  button:last-of-type { right: 10px; } /* Right button */
</style>

<!--<template>-->
<!--  <swiper :options="autoplayOptions" :modules="modules"  :pagination="{ clickable: true }">-->
<!--    <swiper-slide v-for="image in images" :key="image">-->
<!--      <img :src="image" alt="" style="width:100%;height:350px">-->
<!--    </swiper-slide>-->
<!--  </swiper>-->
<!--</template>-->

<!--<script>-->
<!--import { reactive } from 'vue';-->
<!--import SwiperClass, { Pagination } from 'swiper'-->
<!--import { Swiper, SwiperSlide } from 'vue-awesome-swiper'-->
<!--import 'swiper/css'-->
<!--import 'swiper/css/pagination'-->

<!--export default {-->
<!--  components: {-->
<!--    Swiper,-->
<!--    SwiperSlide-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      modules: [Pagination],-->
<!--      images: ["/pic.png",'/pic1.png','/pic2.png'],-->
<!--      autoplayOptions:{-->
<!--        loop:true,-->
<!--        autoplay:{-->
<!--          delay: 5000,-->
<!--          disableOnInteraction: false, // 关键：交互后不停止，由我们手动控制-->
<!--          pauseOnMouseEnter: false // 禁用默认行为，实现自定义逻辑-->
<!--        }-->

<!--      }-->
<!--    }-->
<!--  }-->

<!--}-->
<!--</script>-->
